<template>
  <div>
    <el-dialog
      :title="titles"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
        v-loading="loadinges"
      >
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="form.projectName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目负责人" prop="projectPerson">
              <el-input
                v-model="form.projectPerson"
                style="width: 80%"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目开始时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                style="width: 80%"
                placeholder="选择日期时间"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目结束时间" prop="startTime">
              <el-date-picker
                v-model="form.endTime"
                style="width: 80%"
                placeholder="选择日期时间"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目金额" prop="price">
              <el-input v-model="form.price" style="width: 80%"></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目文件">
              <el-upload
                class="upload-demo"
                :action="action"
                :data="{
                  projectCode: form.projectCode,
                }"
                :limit="1"
                :file-list="fileList"
                :on-success="onsuccess"
                :on-preview="preview"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目成员">
              <el-checkbox-group v-model="checkList" @change="checkChange">
                <el-checkbox
                  :label="item.id"
                  v-for="(item, index) in userData"
                  :key="index"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <el-button
            size="small"
            style="margin: 0 0 0 1vw"
            @click="addothers"
            type="primary"
            >新增需求</el-button
          >
        </div>
        <div style="width: 100%; display: flex">
          <div style="margin: 1vw 0 0 1vw">
            <div v-if="requireData.length == 0 && show">需求列表({{ 0 }})</div>
            <div v-else-if="show">需求列表({{ requireData.length }})</div>
          </div>
        </div>
      </el-form>
      <div
        style="width: 100%; margin: 1vw 0 0 1vw"
        v-show="show && requireData.length > 0"
      >
        <el-card
          class="box-card"
          style="margin: 0 0 0.5vw"
          v-for="(item, index) in requireData"
          :key="index"
        >
          <div style="margin: 0 0 0.5vw">
            <span>项目编号:</span><span>{{ item.projectCode }}</span>
          </div>
          <div style="margin: 0 0 0.5vw">
            <span>需求编号:</span><span>{{ item.id }}</span>
          </div>
          <div style="margin: 0 0 0.5vw">
            <span>需求内容:</span><span>{{ item.projectRequire }}</span>
          </div>
          <div style="margin: 0 0 0.5vw">
            <span>提交时间:</span><span>{{ item.date }}</span>
          </div>
          <div style="margin: 0 0 0.5vw">
            <span>状态:</span
            ><span v-if="item.status == '0'" style="color: red">未完成</span
            ><span v-else style="color: green">已完成</span>
          </div>
          <el-button
            type="danger"
            size="small"
            @click="deletels(item)"
            v-show="item.status == 0"
            >删除</el-button
          >
          <el-button
            type="success"
            size="small"
            @click="dos(item.id)"
            v-show="item.status == 0"
            >完成</el-button
          >
        </el-card>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <addothers
      :addShow="addShow"
      :codes="codes"
      v-if="dialogVisible"
      @closeAddShow="closeAddShow"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import addothers from "./addothers.vue";
import { url } from "../../../utils/url";
import store from "@/store";
import { EventBus } from "../js/events";
export default {
  props: ["show", "title", "fileLists", "loadinges", "codes"],
  components: {
    addothers,
  },
  data() {
    var startTime = (rule, value, callback) => {
      if (value == undefined || value == "") {
        callback("请选择时间");
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      titles: "",
      rules: {},
      form: {
        projectName: "", //项目名称
        projectPerson: "", //项目负责人(自动取本地)
        startTime: "", //项目开始时间
        endTime: "", //项目结束时间
        price: "", //金额
        projectURL: "",
        member: "", //成员
      },
      action: url + "postProjectURL",
      fileList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      userData: [],
      checkList: [],
      loading: false,
      addShow: false,
      requireData: [], //需求集合
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        startTime: [{ required: true, trigger: "blur", validator: startTime }],
        endTime: [{ required: true, trigger: "blur", validator: startTime }],
        price: [{ required: true, message: "请输入项目金额", trigger: "blur" }],
      },
    };
  },
  watch: {
    fileLists(newV) {
      this.fileList = newV;
    },
    show(newV) {
      //自动取本地name
      this.form.projectPerson = this.$store.state.user.info.name;
      //自动勾选项目成员——管理员
      // console.log()
      this.dialogVisible = newV;
      if (newV == true) {
        this.getUser();
        this.getRequire();
      }
    },
    title(newV) {
      this.titles = newV;
    },
    userData(newV) {},
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("shows", this.dialogVisible);
      this.$emit("dialogClose", true);
      this.clear();
    },
    submit() {
      if (this.title == "项目-添加") {
        if (this.fileList.length > 0) {
          this.form.projectURL = this.fileList[0].response.url;
        }
        this.$http.post("/postProject", this.form).then((res) => {
          console.log(res, "res");
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.$emit("refresh", true);
            this.clear();
            //向爷组件传递信息
            EventBus.$emit("message", "喂,老头,更新了");
          } else {
            this.$message.error("error");
          }
        });
      } else {
        console.log("项目编辑");
        this.$http.post("/updateSingProject", this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.clear();
            this.$emit("dialogClose", true);
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    onsuccess(response, file, fileList) {
      if (file) {
        console.log(response, "2222");
        this.form.projectURL = response.data.url;
        console.log(this.form.projectURL, "oopp");
      }
    },
    //获取用户信息
    getUser() {
      this.checkList = [];
      this.$http.get("/allUser").then((res) => {
        if (res.code == 200) {
          this.userData = res.data;
          if (this.title == "项目-添加") {
            this.checkList.push(this.$store.state.user.info.id);
            this.form.member=this.$store.state.user.info.id
          }
        }
      });
    },
    checkChange(e) {
      let str = "";
      e.forEach((ele, index) => {
        str += ele + "/";
      });
      if (e.length > 1) {
        str = str.slice(0, str.length - 1);
      }
      this.form.member = str;
    },
    clear() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.checkList = [];
    },
    //下载预览
    preview(file) {
      let a = document.createElement("a");
      a.href = file.url;
      a.download = file.name.slice(0, file.name.lastIndexOf("."));
      document.body.append(a);
      a.style.display = "none";
      a.click();
    },
    //如果有新增需求收费
    addothers() {
      this.addShow = true;
    },
    closeAddShow(e) {
      if (e == true) {
        this.addShow = false;
      }
    },
    //获取需求列表
    getRequire() {
      let obj = {
        projectCode: this.codes,
      };
      this.$http.post("/getAddOthers", obj).then((res) => {
        if (res.code == 200) {
          this.requireData = res.data.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //刷新
    refresh(e) {
      if (e == true) {
        this.$parent.edit({ projectCode: this.codes });
        this.$nextTick(() => {
          this.getRequire();
        });
      }
    },
    //删除
    deletels(e) {
      let obj = {
        projectCode: e.projectCode,
        id: e.id,
        price: e.price,
      };
      this.$http.post("/deleteAddOthers", obj).then((res) => {
        if (res.code == 200) {
          this.$parent.edit({ projectCode: this.codes });
          this.$nextTick(() => {
            this.getRequire();
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    dos(id) {
      console.log(id);
    },
  },
};
</script>

<style scoped>
.radio {
  display: flex;
  flex-direction: column;
}
.el-radio {
  margin-bottom: 10px;
}
.box-card {
  width: 40vw;
}
</style>